<template>
  <div style="height:100%" class="multicolumn">
    <div class="container">
    <el-card shadow="never" :body-style="contentViewHeight">
      <div >
        <el-form ref="form" :model="queryForm" label-width="61px" :inline="true" class="queryForm adjustCondition">
          <el-form-item label="关键字:">
            <el-input v-model="queryForm.truckNumber" size="small" placeholder="请输入车牌号查询"></el-input>
          </el-form-item>
          <el-form-item>
            <div class="but-container">
              <el-button class="search-btn" type="default" style="margin-right:5px" size="small" @click="refreshList(page,orderBy.name,orderBy.method)">查询</el-button>
              <el-button size="small" @click="reset">重置</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <section>
        <el-button style="margin-left: 0px;margin-right:5px" v-if="hasPermission('truck:truck:add')" type="primary" size="small"
          @click="add">新增</el-button>
        <section class="right-but" style="display:flex">
          <el-button type="text" style="margin-right:-13px" @click="refreshList(page,orderBy.name,orderBy.method)">
            <img style="width:44px;height:36px;" src="~@/assets/img/shuaxin.png">
          </el-button>
            <PopoverBut class="selectBut" ref="popoverBut" :checkedProps="checkedProps" :options="options" @getCheckeds="handlerCloumn"></PopoverBut>
        </section>
      </section>

    <el-table size="mini" v-loading="loading" :data="tableData" style="width: 100%; margin-top: 10px" border
      :header-cell-style="{
        'background-color': '#eeeeee !important',
      }" :row-class-name="tableRowClassName"
      @sort-change="sortthiscolumn">
      <el-table-column type="index" label="序号" width="70" align="center">
        <template slot-scope="scope">
          <span>{{
            (page.pageNo - 1) * page.pageSize + scope.$index + 1
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="truckNumber" label="车牌号" min-width="150px">
      </el-table-column>
      <el-table-column prop="createBy.loginName" label="创建人" min-width="150px">
      </el-table-column>
      <el-table-column prop="createDate" label="创建时间" min-width="150px">
      </el-table-column>
      <el-table-column prop="address" label="操作" width="96">
        <template slot-scope="scope">
          <el-link type="primary" :underline="false" v-if="hasPermission('truck:truck:del')" @click="del(scope.row.id)">删除
          </el-link>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background @current-change="handleCurrentChange" @size-change="handleSizeChange" :page-size="page.pageSize" :current-page="page.pageNo"
      layout="total,sizes,prev, pager, next, jumper" :total="page.total">
    </el-pagination>

     </el-card>
    </div>
    <greenTruckFrom ref="greenTruckFrom" @refreshDataList="refreshList(page, '', '', '', '')"></greenTruckFrom>
    <PlateDialog ref="plateDialog" :showCheckNullNumber="true" :showDefault="true"></PlateDialog>
  </div>
</template>
<script>
import PlateDialog from '@/components/plate/plate'
import greenTruckFrom from './greenTruckFrom'
import PopoverBut from '@/components/button/popoverBut'
const options1 = []
  export default {
    components: {
      PlateDialog,
      greenTruckFrom,
        PopoverBut
    },
    computed: {
      contentViewHeight() {
        let height = this.$store.state.common.documentClientHeight - 122
        return {
          minHeight: height + 'px'
        }
      }
    },

    data() {
      return {
        checkedProps: options1,
        options: [],
        ShowCloum: {
          createDate: ''
        },
        queryForm: {
          truckNumber: '',
        },
        page: {
          pageSize: 10,
          pageNo: 1,
          total: 0
        },
        tableData: [{
          truckNumber: '11'
        }],
        orderBy: {
          name: '',
          method: ''
        },
        loading: false
      }
    },
    activated() {
    },
    methods: {
      // 获取数据列表
      refreshList(params, orderName, orderByAORC, queryForm) {
        this.loading = true
        this.$http({
          url: '/truck/truck/findGreenList',
          method: 'get',
          params: {
            'pageNo': params.pageNo,
            'pageSize': params.pageSize,
            'truckNumber': this.queryForm.truckNumber,
            'isGreen': 1,
            'orderBy': orderName,
            'orderByAORC': orderByAORC
          }
        }).then(({
          data
        }) => {
          if (data.code === '200') {
            this.tableData = data.result.list
              this.tableData.forEach(item => {
                  if (!item.createBy) {
                      item.createBy = {
                          loginName: ''
                      }
                  }
                  if (!item.updateBy) {
                      item.updateBy = {
                          loginName: ''
                      }
                  }
              })
            this.page.total = data.result.count
            this.loading = false
          }
        })
      },
      add() {
        this.$refs.greenTruckFrom.init('add')
      },
      del(id) {
        let ids = id || this.dataListSelections.map(item => {
          return item.id
        }).join(',')
        this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then((res) => {
          this.loading = true
          this.$http({
            url: '/truck/truck/delete',
            method: 'delete',
            params: {
              'ids': ids
            }
          }).then(({
            data
          }) => {
            if (data && data.success) {
              this.$message.success(data.message)
              this.refreshList(this.page, '', '')
            }
            this.loading = false
          })
        })
      },
      // 排序
      sortthiscolumn(a) {
        console.log(a)
        this.orderBy.name = a.prop
        this.page.pageNo = 1
        if (a.order === 'ascending') {
          this.orderBy.method = 'asc'
        } else {
          this.orderBy.method = 'desc'
        }
        this.refreshList(this.page, this.orderBy.name, this.orderBy.method)
      },
      // 重置查询条件
      reset() {
        this.queryForm = {
          truckNumber: ''
        }
      },
      // 是否显示某列数据
      handlerCloumn(e) {
        this.checkedProps = e
      },
      handleSizeChange(e){
        this.page.pageSize = e
        this.refreshList(this.page, 'update_date', 'desc')
      },
      handleCurrentChange(e) {
        this.page.pageNo = e
        this.refreshList(this.page, 'update_date', 'desc')
      },
      tableRowClassName({
        row,
        rowIndex
      }) {
        if (rowIndex % 2 === 1) {
          return 'warning-row'
        } else {
          return 'success-row'
        }
      },
      selectValue(val) {}

    },
    mounted() { // dom加载完以后执行的函数，比如第一次打开网页要请求表格数据可以在这个里面写函数
      this.refreshList(this.page, '', '')
        this.$refs.popoverBut.disable = true
    }
  }
</script>
<style lang="scss" scoped>
    @import '@/assets/scss/config.scss';
.multicolumn{
    >.container{
        margin: 0;
    ::v-deep .el-card{
        border: none;
        .el-card__body{
            padding: 0;
        }
    }
    }
}
.selectBut{
    ::v-deep.el-button{
        cursor: not-allowed;
    }
}

  .queryForm {
    position: relative;
      ::v-deep .el-input--small .el-input__inner {
          height: 36px;
          line-height: 32px;
          width: 230px;
      }

    .but-container {
      top: 20px;
      margin-left: 40px;
    }
      ::v-deep .el-form-item{
          margin-bottom: 20px;
      }
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

  ::v-deep .el-table .warning-row {
    background: #f7f7f7;
  }
</style>
